/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline" label-width="100px">
      <el-form-item label="市选择：">
        <el-select
          v-model="formInline.cityId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="getCity"
        >
          <el-option
            v-for="item in optionsListCity"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区选择：">
        <el-select
          v-model="formInline.districtId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="getDist"
        >
          <el-option
            v-for="item in optionsListDist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="站选择：">
        <el-select
          v-model="formInline.stationId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in selectItemType"
            :key="item.id"
            :label="item.staName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="桩选择：">-->
<!--        <el-select-->
<!--          v-model="formInline.stakeId"-->
<!--          value-key="id"-->
<!--          filterable-->
<!--          clearable-->
<!--          style="width: 200px"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="item in optionsListStake"-->
<!--            :key="item.id"-->
<!--            :label="item.devName"-->
<!--            :value="item.id"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="状态：">
        <el-select
          v-model="formInline.status"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否排队：">
        <el-select
          v-model="formInline.isLineUp"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in isLineUp"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="stationName" label="充电站名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          {{ status[scope.row.status].name }}
        </template>
      </el-table-column>
      <el-table-column prop="chargePower" label="充电功率"></el-table-column>
      <el-table-column prop="districtName" label="是否排队">
        <template v-slot="scope">
          {{ isLineUp[scope.row.isLineUp].name }}
        </template>
      </el-table-column>
<!--      <el-table-column prop="lineUpNum" label="排队数量"></el-table-column>-->
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column prop="districtName" label="操作">
        <template v-slot="scope">
          <el-button class="common-btn" @click="getWatch(scope.row)">查看报告</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-size="pagination.pageSize"
      layout="total, sizes, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
    <videoDialog v-if="DialogVideo" :DialogVideo="DialogVideo" @closeDialog="closeDialogVideo" :row="row"></videoDialog>
  </div>
</template>

<script>
import {warn, plan} from "../../api/inspection/apiUntil";
import videoDialog from "./videoDialog";
import {getWarnStake, sortCharge, stationLoss} from "../../api/inspection/warn";

export default {
  components: {
    videoDialog
  },
  data() {
    return {
      optionsListCity: [],
      optionsListDist: [],
      // optionsListStake:[],
      option: [],
      tableData: [],
      tableDataExpansion: [],
      DialogComponentShow:false,
      row:'',
      titlePatrol: '',
      selectItemType: [],
      warnSource: [
        {
          name: '风险评估',
          value: '1'
        },
        {
          name: '远程巡检',
          value: '2'
        },
        {
          name: '故障诊断',
          value: '3'
        }
      ],
      warnLevel: [
        {
          name: '等级1',
          value: '1'
        },
        {
          name: '等级2',
          value: '2'
        },
        {
          name: '等级3',
          value: '3'
        },
        {
          name: '等级4',
          value: '4'
        },
        {
          name: '等级5',
          value: '5'
        },
      ],
      formInline: {
        stationId: '',
        cityId: '',
        districtId:'',
        isLineUp:'',
        status:''
      },
      status:[
        {
          name:'空闲',
          value:0
        },
        {
          name:'充电中',
          value:1
        },
      ],
      isLineUp:[
        {
          name:'否',
          value:0
        },
        {
          name:'是',
          value:1
        },
      ],
      DialogVideo:false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
    };
  },
  mounted() {
    this.getInit()
    this.getPlanCity()
  },
  watch: {
    'formInline.cityId': function (newData, oldData) {
      if(newData!=oldData){
        this.formInline.districtId = ''
        this.formInline.stationId = ''
      }
    },
    'formInline.districtId': function (newData, oldData) {
      if(newData!=oldData){
        this.formInline.stationId = ''
      }
    },
  },
  methods: {
    closeDialogVideo(){
      this.DialogVideo = false
      this.getInit()
    },
    //城市列表
    getPlanCity() {
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
      })
    },
    // 实时监控
    getWatch(row){
      this.DialogVideo = true
      this.row = row
    },
    getCity(e){
      this.optionsListDist = []
      this.optionsListStake = []
      if(e){
        this.optionsListCity.forEach((item)=>{
          if(item.id===e){
            this.optionsListDist = item.children
          }
        })
      }else {
        this.formInline.districtId=''
      }
    },
    getDist(e) {
      if(e){
        this.getPlanStat()
      }else {
        this.formInline.stationId=''
      }
    },
    //站
    getPlanStat() {
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        this.selectItemType = res.data
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getInit()
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.getInit()
    },
    //列表
    getInit() {
      let params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        ...this.formInline
      }
      warn.sortCharge(params).then((res) => {
        if (res) {
          this.tableData = res.list
          this.pagination.total = res.total
        }
      })
    },
    onSubmit() {
      this.getInit()
    },
    //手动清空
    reset() {
      this.formInline.stationId = ''
      this.formInline.cityId = ''
      this.formInline.districtId = ''
      this.formInline.isLineUp = ''
      this.formInline.status = ''
      this.getInit()
    },
  }
};

</script>

<style scoped>

</style>
